<template>
  <div>
    <el-button
      v-for="(subPage, index) in subPages"
      :key="index"
      @click="showSubPage(index)"
    >
      Sub Page {{ index + 1 }}
    </el-button>
    <second-level-page
      v-if="currentSubPage !== null"
      :data="subPages[currentSubPage].data"
    ></second-level-page>
  </div>
</template>

<script>
import SecondLevelPage from './SecondLevelPage.vue';

export default {
  components: {
    SecondLevelPage,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      currentSubPage: 0, // 默认显示第一个子页面
      subPages: [],
    };
  },
  created() {
    this.splitDataIntoSubPages(this.data);
  },
  methods: {
    splitDataIntoSubPages(data) {
      const chunkSize = Math.ceil(data.length / 3); // 将数据分成三部分
      for (let i = 0; i < data.length; i += chunkSize) {
        const chunk = data.slice(i, i + chunkSize);
        this.subPages.push({ data: chunk });
      }
    },
    showSubPage(index) {
      this.currentSubPage = index;
    },
  },
};
</script>



